'use strict';

import React from 'react'
import {
  StyleSheet,
  WebView,
  View,
  StatusBar,
  Platform,
  Dimensions,
  Text,
  ART
} from 'react-native';

var {
  width,
  height
} = Dimensions.get('window');

var {
  Surface,
  Shape,
  Path,
  Pattern
} = ART;

import  Rectangle from  './Rectangle.art';

export default class ARTPatternDemo extends React.Component {
  render() {
    var textHeight = 20;
    var surfaceHeight = (height - (Platform.OS === 'ios' ? 64 : 76) - textHeight);

    var pattern = Platform.OS === 'ios' ? new Pattern(//第一个参数是图片源码
      ''
      ,
      10, //图案width
      10, //图案height
      20,  //图案left 测试结果发现 最后两个参数没有效果
      20   //图案top
    ):[12345, 10,10,20,20];

    var info = Platform.OS === 'ios'?"满屏的星星✨":"安卓暂不支持图像 pattern, 展示满屏红色";

    return (
      <View style={styles.container} >
        <StatusBar barStyle='default' />
        <View style={{width:width, height:textHeight}}><Text style={{textAlign:'center'}}>{info}</Text></View>
        <Surface width={width} height={surfaceHeight}>
          <Rectangle x={0} y={textHeight} width={width}
            height={surfaceHeight-textHeight}
            stroke="red"
            strokeWidth={1}
            fill={pattern} />
        </Surface>
      </View>
    );
  }
}

var styles = StyleSheet.create({
    container: {
        marginTop: Platform.OS === 'ios' ? 64 : 76,
        flexDirection:'column',
        flex:1,
    },

});

// var route = {
//   key: 'ARTPatternDemo',
//   component: ARTPatternDemo,
//   title: '图案：Pattern',
// };

